<template>
  <el-footer class="el-footer">
    <div class="footerWrapper">
      <div class="footer">
        <div class="webInfo">
          <div style="font-size: medium;
                        margin-bottom: 20px;
                        color: dimgrey">
            Wzzzy's 在线视频课程网站
          </div>
          <div>
            <span>一个简单的前后端分离项目</span>
          </div>
        </div>
        <div class="envInfo">
          <div class="envBackEndInfo">
            <div style="font-size: small;
                        margin-bottom: 20px;
                        color: dimgrey">
              <div style="padding: 0;margin: 0;">
                Environmental Parameters
              </div>
              <div style="padding: 0;margin: 0;">
                of Back-End
              </div>
            </div>
            <div>
              <span>SpringCloud</span>
            </div>
            <div>
              <span>SpringBoot</span>
            </div>
          </div>
          <div class="envFrontEndInfo">
            <div style="font-size: small;
                        margin-bottom: 20px;
                        color: dimgrey">
              <div style="padding: 0;margin: 0;">
                Environmental Parameters
              </div>
              <div style="padding: 0;margin: 0;">
                of Front-End
              </div>
            </div>
            <div>
              <span>vue</span>
            </div>
            <div>
              <span>element-ui</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-footer>
</template>

<script>
  export default {
    name: "the-footer"
  }
</script>

<style scoped>
  .el-footer {
    padding: 200px 0 0 0;
  }

  .footerWrapper {
    width: 100%;
    height: 200px;
    background-color: #EDF2FC;
  }

  .footer {
    width: 1200px;
    padding: 50px 50px 0 50px;
    margin: auto;
    display: flex;
    justify-content: space-between;
  }

  .webInfo {
    color: #9093A6;
    font-size: x-small;
    margin-right: 40px;
  }

  .webInfo div {
    margin-bottom: 10px;
  }

  .envInfo {
    display: flex;
  }

  .envBackEndInfo {
    color: #9093A6;
    font-size: x-small;
    margin-right: 40px;
  }

  .envBackEndInfo div {
    margin-bottom: 10px;
  }

  .envFrontEndInfo {
    color: #9093A6;
    font-size: x-small;
  }

  .envFrontEndInfo div {
    margin-bottom: 10px;
  }

  .aside {
    width: 200px;
  }
</style>